<script setup lang="ts">
import { RouterLink } from 'vue-router';

const moduleDisplayName = '${moduleDisplayName?js_string}';
const moduleSummary = '${moduleSummary?js_string}';
const apiBasePath = '/${apiBasePath}';
const managementPath = '${frontendRouteFullPath?js_string}';

const fields = [
<#list classInfo.fieldList as field>
  {
    name: '${field.fieldName}',
    comment: '${field.fieldComment?default('')?replace('\'', "\\'")?replace("\n", " ")}'
  }<#if field_has_next>,</#if>
</#list>
];

const metricCards = [
  {
    title: moduleDisplayName + ' 总数',
    value: '—',
    hint: '接入统计接口后，展示实时数据量。',
  },
  {
    title: '本周新增',
    value: '—',
    hint: '结合创建时间字段统计近 7 天新增记录。',
  },
  {
    title: '待处理任务',
    value: '—',
    hint: '根据状态字段统计待审核/待处理记录。',
  },
];

const quickActions = [
  {
    title: '创建' + moduleDisplayName,
    description: '跳转到 ' + moduleDisplayName + ' 管理页面发起新增表单。',
    to: managementPath,
  },
  {
    title: '批量导入',
    description: '预留上传入口，结合后台批量导入 API 使用。',
    to: managementPath,
  },
  {
    title: '查看接口文档',
    description: '在 swagger / postman 中验证接口定义与权限规则。',
    to: '/system/features',
  },
];

const buildSummary = () => {
  if (moduleSummary && moduleSummary.trim().length > 0) {
    return moduleSummary;
  }
  return moduleDisplayName + ' 业务模块，支持统一的增删改查、分页查询与权限控制。';
};
</script>

<template>
  <div class="page-stack">
    <section class="card">
      <div class="page-header">
        <div>
          <h2>{{ moduleDisplayName }} 工作台</h2>
          <p>{{ buildSummary() }}</p>
          <div class="summary-grid" style="margin-top: 16px">
            <div class="stat-card">
              <span class="label">实体类型</span>
              <span class="value">{{ moduleDisplayName }}</span>
              <p class="hint">定义位于 <code>src/types/${classInfo.className}.ts</code></p>
            </div>
            <div class="stat-card">
              <span class="label">接口前缀</span>
              <span class="value">{{ apiBasePath }}</span>
              <p class="hint">已对接分页、查询、详情、增删改接口</p>
            </div>
            <div class="stat-card">
              <span class="label">管理入口</span>
              <span class="value">{{ moduleDisplayName }} 管理</span>
              <p class="hint">前端视图自动生成，可直接操作</p>
            </div>
          </div>
        </div>
        <div class="page-actions">
          <RouterLink :to="managementPath" class="pill-button">
            新建 {{ moduleDisplayName }}
          </RouterLink>
          <RouterLink to="/system/features" class="pill-button ghost">
            查看系统特性
          </RouterLink>
        </div>
      </div>
    </section>

    <section class="card">
      <h3 style="margin-top: 0">实时指标（可对接后端统计接口）</h3>
      <div class="summary-grid">
        <div v-for="metric in metricCards" :key="metric.title" class="stat-card">
          <span class="value">{{ metric.value }}</span>
          <span class="label">{{ metric.title }}</span>
          <p class="hint">{{ metric.hint }}</p>
        </div>
      </div>
    </section>

    <section class="panel">
      <h3 style="margin-top: 0">常用操作</h3>
      <ul class="quick-links">
        <li v-for="action in quickActions" :key="action.title">
          <div>
            <strong>{{ action.title }}</strong>
            <p style="margin: 4px 0 0; color: #64748b; font-size: 12px">{{ action.description }}</p>
          </div>
          <RouterLink :to="action.to" class="pill-button ghost">前往</RouterLink>
        </li>
      </ul>
    </section>

    <section class="panel">
      <h3 style="margin-top: 0">数据结构 / 字段字典</h3>
      <ul class="data-dictionary" style="padding-left: 0">
        <li v-for="field in fields" :key="field.name">
          <code>{{ field.name }}</code>
          <span v-if="field.comment"> — {{ field.comment }}</span>
        </li>
        <li>
          类型声明位于 <code>src/types/${classInfo.className}.ts</code>，可根据业务字段拓展。
        </li>
        <li>
          请求封装位于 <code>src/lib/api.ts</code>，适合集中处理鉴权与错误提示。
        </li>
      </ul>
    </section>
  </div>
</template>

